<template>
	<view class="pub-component" v-if="currShowModal">
		<view class="pub-modal">
			<view class="header">
				<text>请选择类型</text>
				<text class="iconfont icon-close" @click="handleClickClose"></text>
			</view>
			<view class="body">
				<view class="type-list">
					<text :class="[item.flag ? 'active': '']" v-for="item in typeList" :key="item.id" @click="handleClickSelectedType(item)">{{item.name}}</text>
					<!-- <text><text class="iconfont icon-zengjia1"></text>增加类型</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent, onMounted, ref, reactive, toRefs, watch} from 'vue'
	import {getAccountType} from '../../../api/app.js'
	export default defineComponent({
		props: {
			typeShowModal: {
				type: Boolean,
				default: false
			}
		},
		setup(props, context) {
			const state = reactive({
				currShowModal: false,
				typeList: [
					// {id: '',name: '全部类型', flag: true},
					// {id: '1',name: '餐饮', flag: false},
					// {id: '2',name: '交通', flag: false},
					// {id: '3',name: '服饰', flag: false},
					// {id: '4',name: '购物', flag: false},
					// {id: '5',name: '教育', flag: false},
					// {id: '6',name: '娱乐', flag: false},
					// {id: '7',name: '医疗', flag: false},
					// {id: '8',name: '保险', flag: false},
					// {id: '9',name: '生活缴费', flag: false},
					// {id: '10',name: '红包', flag: false},
				]
			})
			// 获取类型
			const getType = () => {
				getAccountType().then(res=> {
					console.log(res)
					const {code, data} = res
					if (code === 200) {
						data.forEach(item => {
							item['flag'] = false
						})
						data.unshift({
							id: '',
							name: '全部类型',
							flag: true
						})
						state.typeList = data
					}
				})
				
			}
			// 初始化
			onMounted(()=> {
				getType()
			})
			
			

			// 监听弹窗的状态
			watch(() => props.typeShowModal, (newVal)=> {
				state.currShowModal = newVal
			})
			// 关闭弹窗
			const handleClickClose = () => {
				context.emit('closeType')
			}
			// 选中类型
			const handleClickSelectedType = (el) => {
				state.typeList.forEach(item => {
					if(el.id == item.id) {
						item.flag = true
					} else {
						item.flag = false
					}
				})
				context.emit('selectedType', el)
			}
			
			return {
				...toRefs(state),
				handleClickClose,
				handleClickSelectedType
			}
		}
	})
</script>

<style scoped>
	.pub-component{
		position: fixed;
		top: 0px;
		left: 0px;
		display: flex;
		align-items: flex-end;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.2);
	}
	.pub-modal{
		width: 100%;
		height: 60%;
		background: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: 1s linear;
	}
	.pub-modal .header{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}
	.pub-modal .header text:nth-child(1) {
		font-size: 14px;
	}
	.pub-modal .header text:nth-child(2) {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 19px;
	}
	.body{
		padding: 10px;
		background: #eee;
	}
	.type-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.type-list text {
		width: 32%;
		margin-right: 6px;
		margin-bottom: 6px;
		padding: 8px 0px;
		color: #333;
		background: #FFF;
		font-size: 13px;
		text-align: center;
		border-radius: 4px;
	}
	.type-list text:nth-child(3n) {
		margin-right: 0px;
	}
	.type-list text.active{
		background: #038F42;
		color: #fff;
	}
</style>
